<template>
    <el-container :style="{ height: containerHeight + 'px' }">
        <el-main class="main">
            <!-- 搜索栏 -->
            <el-form :inline="true">
                <el-form-item>
                    <el-tree-select v-model="listParm.group" :data="group" check-strictly clearable class="sort_select">
                    </el-tree-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="listParm.admin" placeholder="管理员id" class="admin_input" />
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="recordTime" type="datetimerange" :shortcuts="shortcuts"
                        value-format="YYYY-MM-DD HH:mm:ss" range-separator="-" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </el-form-item>
                <el-form-item>
                    <el-button :icon="Search" @click="serachBtn">搜索</el-button>
                </el-form-item>
            </el-form>
            <!-- 日志列表 -->
            <el-table :data="tableData.list" style="width: 100%" :height="tableHeigth" border stripe>
                <el-table-column prop="id" label="ID" width="100" />
                <el-table-column prop="group_name" label="类型" width="100" />
                <el-table-column prop="admin" label="管理员ID" width="100" />
                <el-table-column label="详情">
                    <template #default="scope">
                        <template v-if="scope.row.detail && scope.row.detail.length <= 30">
                            <span>{{ scope.row.detail }}</span>
                        </template>
                        <template v-if="scope.row.detail && scope.row.detail.length > 30">
                            <span>{{ scope.row.detail.substr(0, 30) + "......" }}</span> <span
                                @click="clickRecordContent(scope.row)">&gt;&gt;详情</span>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="date_add" label="操作时间" width="250" />
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="listParm.page"
                :page-sizes="[10, 20, 30, 50, 100]" :page-size="listParm.size" :total="total"
                layout="total, sizes, prev, pager, next, jumper" class="pagination"></el-pagination>
        </el-main>
    </el-container>
    <Drawer ref="drawerRef"></Drawer>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

import { Search } from '@element-plus/icons-vue'

import { getAdminsRecordApi } from '@/http/api/admins'
import Drawer from './Drawer.vue'

//容器的高度
const containerHeight = ref(window.innerHeight - 120)
//表格的高度
const tableHeigth = ref(window.innerHeight - 260)
// 定义表格数据
const tableData = reactive({
    list: [],
    sortList: []
})
// 表格查询参数
const listParm = reactive({
    page: 1,
    size: 20,
    group: '',
    admin: '',
    start_time: '',
    end_time: ''
})
const recordTime = ref('')
// 时间范围
const shortcuts = [
    {
        text: '24小时内',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            return [start, end]
        },
    },
    {
        text: '近一个星期',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    }

]
// 数据总数
const total = ref(0)
// 获取数据
const getRecordList = async () => {
    await getAdminsRecordApi(listParm).then(res => {
        if (res && res.code == 200) {
            tableData.list = res.data.results
            total.value = res.data.count
        }
    })
}
// 分组
const group = [
    {
        value: 1,
        label: '系统'
    },
    {
        value: 2,
        label: '资讯'
    },
]

const drawerRef = ref<InstanceType<typeof Drawer>>()
// 查看详情
const clickRecordContent = (content: any) => {
    drawerRef.value?.onShow('日志详情', content)
}
// 页容量改变时触发
const sizeChange = (size: number) => {
    listParm.size = size
    getRecordList()
}
// 页数改变时触发
const currentChange = (page: number) => {
    listParm.page = page
    getRecordList()
}
// 搜索
const serachBtn = () => {
    if (recordTime) {
        listParm.start_time = recordTime.value[0]
        listParm.end_time = recordTime.value[1]
    }
    listParm.page = 1
    getRecordList()
}


onMounted(() => {
    window.addEventListener("resize", () => {
        containerHeight.value = window.innerHeight - 120
        tableHeigth.value = window.innerHeight - 260
    })
    getRecordList()

})

</script>

<style scoped lang='scss'>
.main {
    min-width: 750px;
}

.sort_select {
    width: 100px;
}

.admin_input {
    width: 80px;
}

.pagination {
    margin-top: 10px;
}
</style>